<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--

    导入 js 和 element
-->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<!--
    selection 列 加了多 选框
    @selection-change="handleSelectionChange" 多选框触发的函数
    ref="arr"
-->
<div id="app">
    <el-row>
        <el-button  @click="delBatch" type="danger" size="small">多个删除</el-button>
        <el-table
                ref="arr"
                @selection-change="handleSelectionChange"
                :data="builds"
                border
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="楼宇编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="numbers"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="uints"
                    label="单元">
            </el-table-column>

            <el-table-column
                    prop="remarks"
                    label="备注">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small">修改</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
            <!--
                template  模板  自定义列的内容
                自定义列的内容，参数为 { row, column, $index }
            -->
        </el-table>

        <!--
                <el-pagination   分页的标签
                @size-change    页面大小事件绑定
                @current-change  当前页面数字变化事件绑定

                current-page     当前第三第几页
                page-sizes       每页大小的下拉框
                page-size        每页的大小
                total            总数
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </el-row>

<!--     修改的 弹窗 操作
         title 标题
         visible  是否显示
         关闭之前执行的函数 handleClose 执行函数
 -->
    <el-dialog
            title="修改数据的回显"
            :visible.sync="editDialogVisible"
            width="40%">

        <el-form ref="build" :model="build" label-width="80px">
            <el-form-item label="楼宇id">
                <el-input v-model="build.id" disabled="true" ></el-input>
            </el-form-item>

            <el-form-item label="楼宇编号">
                <el-input v-model="build.numbers"></el-input>
            </el-form-item>

            <el-form-item label="单元">
                <el-input v-model="build.uints"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input v-model="build.remarks"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateBuild"> 修改确定 </el-button>
        </span>
    </el-dialog>

</div>

<script>

    /**
     *
     * 修改的操作 流程:
     * 01  table 这里添加自定义的 列
     * <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="small">修改</el-button>
            <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
        </template>
     *
     * 02  添加了dialog
     *     <el-dialog
             title="修改数据的回显"
             :visible.sync="editDialogVisible"
             width="40%"
             :before-close="handleClose">

       03 在dialog 添加 了表单
            <el-form ref="build" :model="build" label-width="80px">

       04  点击 编辑按钮
         <el-button @click="handleEdit(scope.row)" type="primary" size="small">修改</el-button>
          触发函数
             // 01 弹窗
             this.editDialogVisible = true;
             //02 数据回显
             this.build = row;

      05  编辑  dialog

      06 提交数据
             axios({
                    method:"PUT",
                    url:"http://localhost:8080/building",
                    data:this.build
                })

      07 数据的刷新的操作

            1信息提示:
                        this.$message({  信息提示框
                            message: resp.data.msg,
                            type: 'success'
                        });
            2. 关闭Dialog
            this.editDialogVisible = false;
            3.数据刷新
            this.findBuild(this.currentPage,this.pageSize);
     *
     */

    let app = new Vue({
        el:"#app",
        data:{
            builds:[],
            currentPage:1,
            pageSize:2,
            pageSizes:[2,3,4],
            total:0,
            // 修改弹窗的 开关
            editDialogVisible: false,
            build:{},
            arr:[]
        },
        methods:{

            //删除操作
            handleDelete(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => { // 确定的时候执行的
                    axios({
                        method:"DELETE",
                        url:"http://localhost:8080/building/byid/" + row.id,
                    }).then(resp=>{
                         if (resp.data.code == 100000){
                             //01 删除成功
                             this.$message({
                                 message: resp.data.msg,
                                 type: 'success'
                             });
                                //02 数据刷新
                                //记录总页数,
                                let totalPage = Math.ceil((this.total - 1) / this.pageSize);
                                console.log(totalPage);

                                //最后一条数据的 判断处理
                                if (totalPage === 0 ){
                                    this.findBuild(1,2);
                                    return;
                                }

                                // 判断总的页数和当前 页数的关系
                                // 如果 currentPage > 总页数  使用 总的页数
                                let currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                                // 最后一页的判断处理
                                this.currentPage = currentPage < 1 ? 1 : currentPage;
                                //更新操作
                                this.findBuild(this.currentPage,this.pageSize);
                         }
                    });
                }).catch(() => { // 取消的时候执行的
                    alert("取消了...")
                });
            },

            //批量删除
            delBatch(){
                // 01 拿到的 选中的数据
                if(this.arr.length > 0){
                    let ids = [];
                    for(let i = 0 ; i  <this.arr.length ; i ++ ){
                        let obj = this.arr[i];
                        ids.push(obj.id)
                    }
                    // 02 把数据发送到服务器
                    axios({
                        method:"DELETE",
                        url:"http://localhost:8080/building",
                        data:ids

                    }).then(resp=>{
                        if (resp.data.code == 100000){

                           //01 信息提示
                            // type    类型
                            this.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            //02 数据刷新
                            this.findBuild(this.currentPage,this.pageSize);
                        }
                    })
                }else{
                    this.$message.error('先选择数据');
                }

            },
            //选中触发的函数
            handleSelectionChange(val){
                console.log(val);
                this.arr = val;
                console.log(this.arr);
            },
            // 修改 build的数据提交
            updateBuild(){
                // 01 发送 发数据到服务器
                axios({
                    method:"PUT",
                    url:"http://localhost:8080/building",
                    data:this.build
                }).then(resp=>{

                    //01 信息提示
                    if (resp.data.code == 100000){
                        // 信息提示
                        // message 提示内容
                        // type    类型
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });

                        //02 dialog 关闭
                        this.editDialogVisible = false;
                        //03 数据刷新
                        this.findBuild(this.currentPage,this.pageSize);
                    }
                })

            },
            handleEdit(row){
                // 01 弹窗
                this.editDialogVisible = true;
                //02 数据回显
                this.build = row;
                console.log(row);
            },
            handleClick(value){
                console.log(value);
            },
            // 绑定我们的 页面大小的变化触发的事件
            // 传入的参数val 就是 pageSize 改变的值
            handleSizeChange(val){
                console.log("handleSizeChange...");
                console.log(val);
                // 拿到每页数据的大小
                this.pageSize = val;
                // 调用分页查询的方法
                this.findBuild(this.currentPage,this.pageSize);
            },
            // 当前页面数字变化的触发事件
            //  传入的参数val 就是当前页面 currentPage 改变的值
            handleCurrentChange(val){
                console.log("handleCurrentChange...");
                console.log(val);
                this.currentPage = val;
                this.findBuild(this.currentPage,this.pageSize);
            },
            findBuild(currentPage,pageSize){
                axios({
                    method:"GET",
                    url:"http://localhost:8080/building",
                    params:{
                        currentPage:currentPage,
                        pageSize:pageSize
                    }
                }).then(resp=>{
                    if (resp.data.code == 100000){
                        console.log(resp.data);
                        this.builds = resp.data.data.data;
                        this.total = resp.data.data.total;
                    }else{
                        // 查询失败的 操作
                        this.builds = [];
                        this.total = 0;
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                    }
                })
            }
        },
        created(){
            this.findBuild(1,2);
        }
    })

</script>

</body>
</html>